<html>
<head>
<title>PDBFixer</title>
<script>
function setCurrentStep(step) {
    for (var i = 1; i < step; i++)
        document.getElementById("step"+i).style.color="black"
    document.getElementById("step"+step).style.color="red"
    for (var i = step+1; i < 8; i++)
        document.getElementById("step"+i).style.color="gray"
    if (step == 1)
        document.getElementById("newfile").disabled=true
}
function setCheckboxes(selected) {
    checkboxes = document.getElementById("table").getElementsByTagName("input")
    for (var i = 0; i < checkboxes.length; i++)
        checkboxes[i].checked = selected
}
function enableControls(container, enabled) {
    tags = ["input", "select"]
    for (var i = 0; i < tags.length; i++) {
        controls = container.getElementsByTagName(tags[i])
        for (var j = 0; j < controls.length; j++)
            controls[j].disabled = !enabled
    }
}
function submitWithSpinner() {
    animateSpinner.animateIndex = 0
    setTimeout(function() {animateSpinner();document.getElementById('overlay').style.visibility='visible';}, 1500)
    document.getElementById('mainform').submit()
}
function animateSpinner() {
    for (var i = 0; i < 3; i++) {
        var bar = document.getElementById("progress"+(i+1))
        if (i == animateSpinner.animateIndex)
            bar.style.backgroundColor = "black"
        else
            bar.style.backgroundColor = "lightgray"
    }
    animateSpinner.animateIndex = (animateSpinner.animateIndex+1)%3
    setTimeout(function() {animateSpinner()}, 1000)
}
</script>
<style>
body {
    margin-top: 0;
    font-family:sans-serif;
    background-color: rgb(217,217,217);
    background-image: url("/image?name=background.jpg");
    background-size: 80%;
    background-repeat: repeat-y
}
input {
    font-size: small
}
select {
    font-size: small
}
table {
    border-collapse: collapse;
    margin: 7pt
}
th {
    padding: 2pt;
    background-color: lightgray
}
td {
    padding: 2pt
}
#progressParent {
    position: fixed;
    top: 40%;
    left: 50%;
    margin-top: -75px;
    margin-left: -125px
}
#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgba(255,255,255,0.75);
    visibility:hidden;
}
#progressMessage {
    width: 100%;
    position: fixed;
    top: 40%;
    margin-top: 90px;
    text-align: center
}
</style>
</head>
<body>
<div id="overlay">
    <div id="progressParent">
        <div id="progress1" style="width:50px;height:150px;position:absolute;left:0px"></div>
        <div id="progress2" style="width:50px;height:150px;position:absolute;left:100px"></div>
        <div id="progress3" style="width:50px;height:150px;position:absolute;left:200px"></div>
    </div>
    <div id="progressMessage">
        <div style="font-size:xx-large">Processing</div>
        This may take some time.
    </div>
</div>
<span style="font-style:italic;font-size:large;float:right;position:relative;top:0;right:0;height:100%;padding:10px 10px">
    <img src="/image?name=logo_small.png"/>
    <p/>
    <form method="post" action="/controls">
        <input type="submit" name="newfile" value="New File" id="newfile"/>
        <input type="submit" name="quit" value="Quit" style="float:right"/>
    </form>
    <p id="step1">Load File</p>
    <p id="step2">Select Chains</p>
    <p id="step3">Add Residues</p>
    <p id="step4">Convert Residues</p>
    <p id="step5">Add Heavy Atoms</p>
    <p id="step6">Add Water/Hydrogens</p>
    <p id="step7">Save File</p>
</span>
<p/>